<style scoped>
</style>
<template>
  <el-row :gutter="15">
    <el-col :span="24">
      <table class="order-table">
        <tr v-for="(item, index) in tableData" :key="index">
          <td class="order-table-td">
            <table class="order-table-td-table">
              <tr class="tr-header">
                <td width="30%" align="left" colspan="2">
                  订单号：<a href="javascript:;" @click="show(item)" >{{item.orderNo}}</a>
                  <span style="margin-left:10px;">
                    <!--<mark-template :id="item.id" :resultColor="item.colorFlag ? item.colorFlag : 'gray'"  @refresh="refresh"></mark-template>-->
                  </span>
                </td>
                <td width="20%" align="left">
                  服务方：{{item.serviceProvider}} （ {{item.serviceProviderPhone}} ）
                </td>
                <td width="25%" align="center">
                  {{item.business}} | {{item.service}}：<span class="font-orange font-weight500">{{item.orderState | filterDataBaseDictionary}}</span>
                </td>
                <td width="25%" align="center">
                  <span v-if="orderState != '7'">发起退款：{{item.refundDate | unixTimestampFilter}}</span>
                  <span v-else>退款时间：{{item.refundDate | unixTimestampFilter}}</span>
                  <!--下单时间：{{item.foundTime}}-->
                </td>
              </tr>
              <tr class="tr-body">
                <td>
                  <Upload-image :listItemStyle="{ width: '120px',height: '90px'}" :showPictureNum="true" :readonly="true" :value="handleJsonStringArr(item.imgAddress)"></Upload-image>
                </td>
                <td>
                  <div>
                    <div class="marginBottom8">
                      商品名称：<truncate :value="item.goodsName" :maxLength="10"></truncate>
                    </div>
                    <div class="marginBottom8">
                      商品数量：{{item.goodsSum}}套
                    </div>
                  </div>
                  <div class="clearfix"></div>
                </td>
                <td>
                  <div class="marginBottom8">
                    客户姓名：{{item.consigneeName}} {{item.consigneePhone}}
                  </div>
                  <div class="marginBottom8">
                    客户地址：<truncate :value="item.consigneeProvince + item.consigneeCity + item.consigneeDistrict + item.consigneeAddress" :maxLength="24"></truncate>
                  </div>
                </td>
                <td align="center">
                  <div class="marginBottom8">
                    <span style="font-size: 36px;" class="font-red">￥{{item.endFee | decimalNumFilter}}</span>
                  </div>
                </td>
                <td align="center">
                  <template v-if="orderState == 5">
                    <p>
                      <el-button type="primary" plain style="width: 120px;" @click="showRefund(item)">取消退款</el-button>
                    </p>
                    <p>
                      <span class="help-block" v-if="item.refundDiff > 0">剩余<timeReduce :second="item.refundDiff || 0"></timeReduce>自动退款</span>
                      <span class="help-block" v-else>已退款</span>
                    </p>
                  </template>
                  <p v-if="orderState == '7'"><a @click="show(item)" href="javascript:;" class="blue-color">查看详情</a></p>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </el-col>
  </el-row>
</template>
<script>
import {filterSecond, filterDataBaseDictionary, unixTimestampFilter} from '@/filters'
import {handleJsonStringArr, confirm, alert} from '@/utils'
import markTemplate from '@/components/markTemplate'
import TimeReduce from '@/components/TimeReduce'
export default {
  name: 'afterServiceRefundIndex',
  components: {
    markTemplate,
    TimeReduce
  },
  filters: {
    filterSecond,
    filterDataBaseDictionary,
    unixTimestampFilter
  },
  props: {
    tableData: {
      type: Array,
      required: true
    },
    orderState: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {}
  },
  created() {},
  computed: {
    // copyTableData () {
    //   console.log('this.tableData', this.tableData)
    //   let copyTableData = copy(this.tableData)
    //   console.log('copy的copyTableData', copyTableData)
    //   if (Array.isArray(copyTableData)) {
    //     copyTableData.forEach(v => {
    //       this.$set(v, 'isActive', true)
    //     })
    //   }
    //   return copyTableData
    // }
  },
  watch: {},
  methods: {
    handleJsonStringArr,
    step(item) {
      if (item.refundScheme === '2') { // 需要仲裁的订单
        switch (item.refundStatus) {
          case 'refund|100': return 1
          case 'refund|200': return 2
          case 'refund|300': return 3
        }
      } else {
        switch (item.refundStatus) { // 直接退款的订单
          case 'refund|100': return 1
          case 'refund|300': return 2
        }
      }
    },
    // 获取出价商家图标
    getBiddersImgArr(val) {
      if (Array.isArray(val)) {
        return val
      }
      if (typeof val === 'string' && val) {
        return val.split(',')
      }
    },
    show(data) {
      this.$router.push({path: '/ss-fhb/refund/show/' + data.id, query: {orderState: this.orderState}})
    },
    showRefund(item) {
      confirm('<p style="font-size:15px;">确定要取消退款吗？</p><p style="font-size:14px;">(取消退款后，订单将返回至服务中状态)</p>', '温馨提示', {
        confirmButtonLoading: true,
        dangerouslyUseHTMLString: true,
        showCancelButton: true,
        confirmCallBack: ({confirmButtonLoadingClose, close}) => {
          this.$ajax.post('/ms-fahuobao-order/merRefund/cancelRefund', {orderId: item.id}).then(response => {
            if (response.success) {
              close()
              alert('取消退款成功！', '', 'success')
              this.refresh()
            }
            confirmButtonLoadingClose()
          }).catch(_ => {
            confirmButtonLoadingClose()
          })
        }
      })
    },
    refresh() {
      this.$emit('refresh')
    }
  }
}
</script>
